@ant-layout: ant-layout;
.@{ant-layout} {
    &-sider {
        background: var(--mi-sider-color, @mi-sider-color);
    }
}

@ant-popover: ant-popover;
.@{ant-popover} {
    z-index: 19900302;
    
    & &-content {
        border: 1px solid var(--mi-theme-color, @mi-theme-color);
        .border-radius();

        & > .@{ant-popover}-arrow {
            .properties(width);
            .properties(height);
            border-style: solid;
            .properties(border-width, 1);
            border-color: var(--mi-theme-color, @mi-theme-color) transparent transparent var(--mi-theme-color, @mi-theme-color);
            background: var(--mi-sider-color, @mi-sider-color);
        }
    }
    &&-placement {
        &-top,
        &-topRight,
        &-topLeft {
            .@{ant-popover} {
                &-content {
                    & > .@{ant-popover}-arrow {
                        border-color: transparent var(--mi-theme-color, @mi-theme-color) var(--mi-theme-color, @mi-theme-color) transparent;
                    }
                }
            }
        }
        &-right,
        &-rightTop,
        &-rightBottom {
            .@{ant-popover} {
                &-content {
                    & > .@{ant-popover}-arrow {
                        border-color: transparent transparent var(--mi-theme-color, @mi-theme-color) var(--mi-theme-color, @mi-theme-color);
                    }
                }
            }
        }
        &-left,
        &-leftTop,
        &-leftBottom {
            .@{ant-popover} {
                &-content {
                    & > .@{ant-popover}-arrow {
                        border-color: var(--mi-theme-color, @mi-theme-color) var(--mi-theme-color, @mi-theme-color) transparent transparent;
                        transform: translateY(-50%) rotate(45deg);
                    }
                }
            }
        }
    }

    &-inner {
        background-color: var(--mi-popover-bg-color, @mi-popover-bg-color);
        .border-radius(8);

        &-content {
            .properties(padding, 16)
        }
    }
}

@ant-tabs: ant-tabs;
.@{ant-tabs} {
    color: fade(@mi-white-color, 65%);

    &-bar {
        border-bottom-color: var(--mi-tab-nav-border-bottom-color, @mi-tab-nav-border-bottom-color);
    }

    &-nav {
        & .@{ant-tabs}-tab {
            color: var(--mi-tab-nav-color, @mi-tab-nav-color);

            &-active,
            &:hover {
                color: var(--mi-theme-color, @mi-theme-color);
            }
        }
    }

    &-ink-bar {
        background-color: var(--mi-theme-color, @mi-theme-color);
    }

    &-content {
        color: @mi-white-color;
    }

    &-tab-prev,
    &-tab-next {
        color: @mi-white-color;

        &:hover  {
            color: @mi-white-color;
        }
    }

    &-tab-btn-disabled {
        color: fade(@mi-white-color, 30%);

        &:hover {
            color: fade(@mi-white-color, 30%);
        }
    }
}

@ant-dropdown: ant-dropdown;
@ant-menu: ant-menu;
.@{ant-dropdown} {
    z-index: 19900302;
    
    & &-menu {
        background: var(--mi-dropdown-bg-color, @mi-dropdown-bg-color);
        .border-radius();
    }

    & &-menu-item {
        color: var(--mi-dropdown-text-color, @mi-dropdown-text-color);
        .flex(center, flex-start);
        .properties(padding-top);
        .properties(padding-bottom);
        .properties(padding-left, 24);
        .properties(padding-right, 24);

        &-selected {
            background: transparent;
        }

        a {
            .flex(center, flex-start);
            color: var(--mi-dropdown-text-color, @mi-dropdown-text-color);
            padding: 0;
            margin: 0;

            .anticon {
                &:last-child {
                    margin-right: 0;
                    .properties(margin-left, 24);
                }
                
                &:first-child {
                    margin-left: 0;
                }
            }

            .title {
                .properties(margin-left);

                + .tag,
                + .icon {
                    .properties(margin-left, 24);
                }

                + .icon {
                    color: var(--mi-error-color, @mi-error-color);
                }
            }
        }

        &-active,
        &:hover {
            background: var(--mi-dropdown-item-hover-color, @mi-dropdown-item-hover-color);
            color: var(--mi-theme-color, @mi-theme-color);

            a,
            .anticon,
            .anticon + span {
                color: var(--mi-theme-color, @mi-theme-color);
            }
        }
    }
}

@ant-btn: ant-btn;
.@{ant-btn},
.@{mi-prefix}btn {
    &:hover,
    &:active,
    &:link,
    &:focus {
        border-color: var(--mi-theme-color, @mi-theme-color);
        color: var(--mi-btn-default-color, @mi-btn-default-color);
    }

    &-default,
    &-default:hover,
    &-default:active,
    &-default:focus {
        color: var(--mi-btn-default-color, @mi-btn-default-color);
        background: var(--mi-btn-defaul-bg-color, @mi-btn-defaul-bg-color);
        border-color: var(--mi-btn-defaul-border-color, @mi-btn-defaul-border-color);
        text-shadow: none;
    }

    &-success,
    &-success:hover,
    &-success:active,
    &-success:focus {
        color: @mi-white-color;
        background: var(--mi-success-color, @mi-success-color);
        border-color: var(--mi-success-color, @mi-success-color);
        text-shadow: none;
    }

    &-primary,
    &-primary:hover,
    &-primary:active,
    &-primary:focus {
        color: var(--mi-sider-color, @mi-sider-color);
        background: var(--mi-theme-color, @mi-theme-color);
        border-color: var(--mi-theme-color, @mi-theme-color);
        text-shadow: none;
    }

    &-danger,
    &-danger:hover,
    &-danger:active,
    &-danger:focus {
        color: @mi-white-color;
        background: var(--mi-danger-color, @mi-danger-color);
        border-color: var(--mi-danger-color, @mi-danger-color);
        text-shadow: none;
    }

    &-info,
    &-info:hover,
    &-info:active,
    &-info:focus {
        color: @mi-white-color;
        background: var(--mi-info-color, @mi-info-color);
        border-color: var(--mi-info-color, @mi-info-color);
        text-shadow: none;
    }

    &-warning,
    &-warning:hover,
    &-warning:active,
    &-warning:focus {
        color: @mi-white-color;
        background: var(--mi-warning-color, @mi-warning-color);
        border-color: var(--mi-warning-color, @mi-warning-color);
        text-shadow: none;
    }

    &-ghost,
    &-ghost:hover,
    &-ghost:active,
    &-ghost:focus,
    &-background-ghost {
        color: var(--mi-btn-ghost-text-color, @mi-btn-ghost-text-color);
        border-color: var(--mi-btn-ghost-border-color, @mi-btn-ghost-border-color);
    }
}

@ant-checkbox: ant-checkbox;
.@{ant-checkbox} {
    &-wrapper {
        & .@{ant-checkbox} {
            &-inner {
                border-color: var(--mi-theme-color, @mi-theme-color);

                &:hover, &:focus, &:active {
                    border-color: var(--mi-theme-color, @mi-theme-color);
                }
            }

            &-checked {
                & .@{ant-checkbox}-inner {
                    border-color: var(--mi-theme-color, @mi-theme-color);
					background: var(--mi-theme-color, @mi-theme-color);
                }

                &:after {
                    border: 1px solid var(--mi-theme-color, @mi-theme-color);
                }
            }
        }

        &:hover,
        &:focus {
            .@{ant-checkbox} {
                &-inner {
                    border-color: var(--mi-theme-color, @mi-theme-color);
                }
            }
            & + .@{ant-checkbox}-inner {
                border-color: var(--mi-theme-color, @mi-theme-color);
            }
        }

        span:last-child {
            color: @mi-white-color;
        }
    }
}

@ant-card: ant-card;
.@{ant-card} {
    &.@{mi-prefix}card {
        border: 1px solid var(--mi-theme-color, @mi-theme-color);
        .border-radius();
        background: var(--mi-body-color, @mi-body-color);

        .@{ant-card} {
            &-head {
                color: var(--mi-card-tab-color, @mi-card-tab-color);
                border-bottom-color: var(--mi-theme-color, @mi-theme-color);
    
                & .@{ant-tabs} {
                    &-bar {
                        border-bottom-color: var(--mi-theme-color, @mi-theme-color);
                    }
    
                    &-tab {
                        color: var(--mi-card-tab-color, @mi-card-tab-color);
    
                        &-active {
                            color: var(--mi-theme-color, @mi-theme-color);
                        }
                    }
                }
            }
    
            &-body {
                color: var(--mi-card-tab-color, @mi-card-tab-color);
            }
        }
    }
}

@ant-table: ant-table;
.@{ant-table} {
    &-wrapper.@{mi-prefix}table {
        & .@{ant-table} {
            .border-radius();

            &-body {
                table {
                    background: var(--mi-body-color, @mi-body-color);
                }
            }
    
            &-thead {
                & > tr > th {
                    color: var(--mi-table-text-color, @mi-table-text-color);
                    background: var(--mi-table-color, @mi-table-color);
                    border-bottom-color: var(--mi-table-border-color, @mi-table-border-color);
                }
                
                > tr:first-child > th:first-child {
                    .properties(border-top-left-radius, 4);
                }
    
                > tr:last-child > th:last-child {
                    .properties(border-top-right-radius, 4);
                }
    
                > tr:first-child {
                    > td:first-child {
                        .properties(border-bottom-left-radius, 4);
                    }
                    
                    > td:last-child {
                        .properties(border-bottom-right-radius, 4);
                    }
                }
            }
    
            &-tbody {
                > tr > td {
                    border-bottom-color: var(--mi-table-border-color, @mi-table-border-color);
                    color: var(--mi-table-text-color, @mi-table-text-color);
                    background: var(--mi-table-td-color, @mi-table-td-color);
                }
                
                tr:hover,
                tr:focus,
                tr:active,
                tr:hover > td {
                    background: var(--mi-table-td-hover-color, @mi-table-td-hover-color);
                }
            }
    
            &-bordered {
                & .@{ant-table} {
                    &-body {
                        > table {
                            background: var(--mi-body-color, @mi-body-color);
                            border-top-color: var(--mi-table-border-color, @mi-table-border-color);
                            border-left-color: var(--mi-table-border-color, @mi-table-border-color);
                        }
                    }
    
                    &-tbody > tr > td,
                    &-thead > tr > th {
                        color: var(--mi-table-text-color, @mi-table-text-color);
                        border-right-color: var(--mi-table-border-color, @mi-table-border-color);
                        border-bottom-color: var(--mi-table-border-color, @mi-table-border-color);
                    }
                }
            }
        }
    }
}

@ant-radio: ant-radio;
.@{ant-radio} {
    &-wrapper {
        color: var(--mi-radio-text-color, @mi-radio-text-color);
    }

    &-checked &-inner {
        border-color: var(--mi-theme-color, @mi-theme-color);
    }

    &-inner {
        &:after {
            background-color: var(--mi-theme-color, @mi-theme-color);
        }
    }
}

.ant-back-top {
    .properties(right, 20);
    .properties(bottom, 20);
}

.ant-tooltip {
    z-index: 19900302;
}

.ant-drawer {
    z-index: 19900407;
}

[ant-click-animating-without-extra-node="true"] {
    &:after {
        box-shadow: 0 0 0 0 var(--mi-theme-color, @mi-theme-color);
    }
}

@keyframes waveEffect {
    100% {
        box-shadow: 0 0 0 var(--mi-theme-color, @mi-theme-color);
        box-shadow: 0 0 0 6px var(--mi-theme-color, @mi-theme-color);
    }
}